fix(ui): Right align table action cells by alexcarpenter · Pull Request #7701 · clerk/javascript

alexcarpenter · 2026-01-29T19:21:40Z

Description

Table actions should be right aligned.

BEFORE	AFTER

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Release Notes

Style

Action columns in tables are now right-aligned across API Keys management, Organization Members, Invitations, Request to Join, and Payment Attempts views for improved visual consistency and better layout.
Enhanced table component architecture to support flexible column alignment configuration.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2026-01-29T19:21:44Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jan 29, 2026 7:23pm

changeset-bot · 2026-01-29T19:21:45Z

🦋 Changeset detected

Latest commit: 7c90884

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-01-29T19:24:15Z

📝 Walkthrough

Walkthrough

This pull request introduces a new ColumnHeader type to the DataTable component that allows specifying column alignment metadata. The headers prop of DataTable is updated from an array of localization keys to an array of objects containing a key and optional alignment property. Multiple components throughout the UI package are refactored to use the new header format, with action columns explicitly right-aligned. Additionally, React list keys are added to mapped table rows in several components to satisfy React requirements.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(ui): Right align table action cells' directly and specifically describes the main change across all files—implementing right alignment for table action cells.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-01-29T19:26:20Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7701

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7701

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7701

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7701

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7701

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7701

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7701

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7701

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7701

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7701

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7701

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7701

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7701

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7701

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7701

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7701

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7701

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7701

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7701

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7701

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7701

commit: 7c90884

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @.changeset/dry-rice-exist.md:
- Line 5: Update the release note phrase "Right align table actions." to use a
hyphenated compound modifier: change it to "Right-align table actions." so the
wording is grammatically consistent; locate and replace the exact string "Right
align table actions." in the .changeset entry.

coderabbitai · 2026-01-29T19:27:35Z

.changeset/dry-rice-exist.md

+'@clerk/ui': patch
+---
+
+Right align table actions.


⚠️ Potential issue | 🟡 Minor

Hyphenate the compound modifier.

Consider “Right-align table actions.” for grammatical consistency in release notes.

🧰 Tools

🪛 LanguageTool

[grammar] ~5-~5: Use a hyphen to join words.
Context: --- '@clerk/ui': patch --- Right align table actions.

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents

In @.changeset/dry-rice-exist.md at line 5, Update the release note phrase "Right align table actions." to use a hyphenated compound modifier: change it to "Right-align table actions." so the wording is grammatically consistent; locate and replace the exact string "Right align table actions." in the .changeset entry.

alexcarpenter added 2 commits January 29, 2026 14:14

fix(ui): Right align table action cells

826e82b

update to object

e7d30d1

github-actions bot added the core-3 label Jan 29, 2026

add changeset

7c90884

vercel bot deployed to Preview January 29, 2026 19:23 View deployment

coderabbitai bot reviewed Jan 29, 2026

View reviewed changes

tmilewski approved these changes Jan 29, 2026

View reviewed changes

alexcarpenter merged commit c51f843 into main Jan 30, 2026
65 of 66 checks passed

alexcarpenter deleted the alexcarpenter/right-align-table-actions branch January 30, 2026 15:32

CEOJSF approved these changes Feb 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): Right align table action cells#7701

fix(ui): Right align table action cells#7701
alexcarpenter merged 3 commits intomainfrom
alexcarpenter/right-align-table-actions

alexcarpenter commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 29, 2026 •

edited

Loading

Walkthrough

Uh oh!

pkg-pr-new bot commented Jan 29, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

alexcarpenter commented Jan 29, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Release Notes

Uh oh!

vercel bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

pkg-pr-new bot commented Jan 29, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexcarpenter commented Jan 29, 2026 •

edited by coderabbitai bot

Loading

vercel bot commented Jan 29, 2026 •

edited

Loading

changeset-bot bot commented Jan 29, 2026 •

edited

Loading

coderabbitai bot commented Jan 29, 2026 •

edited

Loading